import { defineStore } from 'pinia';
import { useWindowSize } from '@vueuse/core';
import { ElMessage } from 'element-plus';
import { store } from '../index';

export type LayoutType = 'classic' | 'top' | 'columnMenu';

interface LayoutState {
  breadcrumb: boolean;
  breadcrumbIcon: boolean;
  collapse: boolean;
  uniqueOpened: boolean;
  hamburger: boolean;
  tagsView: boolean;
  tagsViewIcon: boolean;
  logo: boolean;
  fixedHeader: boolean;
  layout: LayoutType;
  footer: boolean;
}

const { width: winInnerWidth } = useWindowSize();

export const useLayoutStore = defineStore('layout', {
  state: (): LayoutState => {
    return {
      breadcrumb: true, // 面包屑
      breadcrumbIcon: true, // 面包屑图标
      collapse: false, // 折叠菜单
      uniqueOpened: false, // 是否只保持一个子菜单的展开
      hamburger: true, // 折叠图标
      tagsView: true, // 标签页
      tagsViewIcon: true, // 是否显示标签图标
      logo: true, // logo
      fixedHeader: true, // 固定header
      footer: false, // 显示页脚
      layout: 'classic' // layout布局
    };
  },
  persist: {
    key: '__app-layout__',
    paths: ['breadcrumb', 'breadcrumbIcon', 'uniqueOpened', 'hamburger', 'tagsView', 'tagsViewIcon', 'logo', 'fixedHeader', 'footer', 'layout']
  },
  getters: {
    getBreadcrumb(): boolean {
      return this.breadcrumb;
    },
    getBreadcrumbIcon(): boolean {
      return this.breadcrumbIcon;
    },
    getCollapse(): boolean {
      return this.collapse;
    },
    getUniqueOpened(): boolean {
      return this.uniqueOpened;
    },
    getHamburger(): boolean {
      return this.hamburger;
    },
    getTagsView(): boolean {
      return this.tagsView;
    },
    getTagsViewIcon(): boolean {
      return this.tagsViewIcon;
    },
    getLogo(): boolean {
      return this.logo;
    },
    getFixedHeader(): boolean {
      return this.fixedHeader;
    },
    getLayout(): LayoutType {
      return this.layout;
    },
    getMobile(): boolean {
      if (winInnerWidth.value < 768) {
        return true;
      }
      const u = window.navigator.userAgent;
      const isMobile =
        !!u.match(/AppleWebKit.*Mobile/i) ||
        !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/);
      return isMobile;
    },
    getFooter(): boolean {
      return this.footer;
    }
  },
  actions: {
    setBreadcrumb(breadcrumb: boolean) {
      this.breadcrumb = breadcrumb;
    },
    setBreadcrumbIcon(breadcrumbIcon: boolean) {
      this.breadcrumbIcon = breadcrumbIcon;
    },
    setCollapse(collapse: boolean) {
      this.collapse = collapse;
    },
    toggleCollapse() {
      this.collapse = !this.collapse;
    },
    setUniqueOpened(uniqueOpened: boolean) {
      this.uniqueOpened = uniqueOpened;
    },
    setHamburger(hamburger: boolean) {
      this.hamburger = hamburger;
    },
    setTagsView(tagsView: boolean) {
      this.tagsView = tagsView;
    },
    setTagsViewIcon(tagsViewIcon: boolean) {
      this.tagsViewIcon = tagsViewIcon;
    },
    setLogo(logo: boolean) {
      this.logo = logo;
    },
    setFixedHeader(fixedHeader: boolean) {
      this.fixedHeader = fixedHeader;
    },
    setLayout(layout: LayoutType) {
      if (this.getMobile && layout !== 'classic') {
        ElMessage.warning('移动端模式下不支持切换其它布局');
        return;
      }
      this.layout = layout;
      // setStorage('layout', this.layout)
    },
    setFooter(footer: boolean) {
      this.footer = footer;
    },
    reset() {
      this.breadcrumb = true;
      this.breadcrumbIcon = true;
      this.uniqueOpened = false;
      this.hamburger = true;
      this.tagsView = true;
      this.tagsViewIcon = true;
      this.logo = true;
      this.fixedHeader = true;
      this.footer = false;
      this.layout = 'classic';
    }
  }
});

export const useLayoutStoreWithOut = () => {
  return useLayoutStore(store);
};
